<template>
  <view class="guess-panel">
    <view class="title">猜你喜欢</view>
    <view class="content">
      <navigator
        v-for="item in list"
        :key="item.id"
        class="item"
        :url="`/pages/goods/goods?id=${item.id}`"
      >
        <image class="image" :src="item.picture" mode="aspectFill"></image>
        <view class="item-title"
          ><text class="text">{{ item.name }} </text></view
        >
        <view class="price">
          <text class="symbol">￥</text>
          <text class="number">{{ item.price }}</text>
        </view>
      </navigator>
    </view>
    <view class="info">
      <view class="loading" v-if="!ifFinish">
        <uni-icons type="spinner-cycle" size="14"></uni-icons>
        <text class="icon-loading">正在加载中...</text>
      </view>
      <view class="no-loading" v-else>暂无数据</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onReady } from '@dcloudio/uni-app'
import Api from '@/services/index'
import type { TGuessItem } from '@/types/home'
import type { TPageParams } from '@/types/global'

const pageParams: Required<TPageParams> = {
  page: 1,
  pageSize: 8,
}

const ifFinish = ref(false)
const list = ref<TGuessItem[]>([])

onReady(async () => {
  // console.log('onReady')
  await getData()
})

// onShow(async () => {
//   console.log('onShow')
//   await getData()
// })

const getData = async () => {
  console.log('getData')
  if (ifFinish.value) {
    return uni.showToast({
      icon: 'none',
      title: '没有更多数据了',
    })
  }
  const res = await Api.HomeAPI.getGuessList(pageParams)
  list.value = [...list.value, ...res.result.items]
  if (pageParams.page < res.result.pages) {
    pageParams.page++
  } else {
    ifFinish.value = true
  }
}

const resetData = () => {
  pageParams.page = 1
  pageParams.pageSize = 8
  list.value = []
  ifFinish.value = false
}
defineExpose({
  getMore: getData,
  resetData,
})
</script>

<style lang="scss" scoped>
.guess-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  // min-height: 400rpx;
  width: 750rpx;
  justify-content: flex-start;
  padding: 0 30rpx 20rpx;
  min-height: 400rpx;
  // background: #f4f4f4;
  .title {
    font-size: 36rpx;
    line-height: 60rpx;
    margin-bottom: 20rpx;

    &::before,
    &::after {
      content: '';
      display: inline-block;
      width: 20rpx;
      height: 20rpx;
      background-image: url(../static/images/bubble.png);
      background-size: contain;
      margin: 0 10rpx;
    }
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    // background: #fff;
    justify-content: space-between;
    .item {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 340rpx;
      padding: 20rpx 10rpx 10rpx;
      background-color: #fff;
      // margin-right: 10rpx;
      margin-bottom: 20rpx;

      &:last-child,
      &:nth-last-child(2) {
        margin-bottom: 0;
      }

      .image {
        width: 320rpx;
        height: 320rpx;
        border-radius: 10rpx;
      }
      .item-title {
        display: flex;
        height: 80rpx;
        font-size: 28rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        .text {
          display: inline-block;
          width: 320rpx;
        }
      }
      .price {
        width: 100%;
        color: #cf4444;
        line-height: 60rpx;
        .symbol {
          font-size: 24rpx;
          margin-right: 2rpx;
        }
        .number {
          font-size: 32rpx;
        }
      }
    }
  }
  .info {
    margin-top: 20rpx;
    font-size: 24rpx;
  }
}
</style>
